<template>
    <div class="content">
        <el-dialog :visible.sync="modifyDispose.dialogFormVisible" title="待处理" size="tiny" :before-close="handleClose" > 
            <div v-loading="loading">
                <table class="dialogTable mr" align="center">
                    <tr>
                        <td>当前进度</td>
                        <td>转账失败，请处理</td>
                    </tr>
                    <tr>
                        <td>返回原因</td>
                        <td>{{this.modifyDispose.reason || '--'}}</td>
                    </tr>
                </table>
                <div class="title mr">请选择下一步操作：</div>
                <el-form :model="form" ref="form">
                    <el-row type="flex">
                        <el-form-item label="">
                            <div class="mg-left"><el-radio class="radio" v-model="radio" label="1">重新发送 转账申请</el-radio></div>
                            <div class="mg-left"><el-radio class="radio" v-model="radio" label="2">线下转账</el-radio></div>                        
                        </el-form-item>
                    </el-row>
                </el-form>
            <footer>
              <el-button @click="handleClose">取消</el-button>
              <el-button @click="add()" type="primary">确认</el-button>
            </footer>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { apply } from 'api/mentionManagement';
export default {
    name: 'mentiondispose',
    props: {
        modifyDispose: {}
    },
    created() {
        this.seach();
    },
    data() {
        return {
            loading: false,
            form: {
                textarea: ''
            },
            radio: '1'
        };
    },
    methods: {
        handleClose() {
            this.modifyDispose.dialogFormVisible = false;
        },
        seach() {
      // apply(this.modifyDispose.pId)
        },
        add() {
            this.loading = true;
            apply(this.radio, this.modifyDispose.pId).then(data => {
                this.loading = false;
                this.$message({
                    message: '设置成功！',
                    type: 'success'
                });
                this.$emit('sortDispose', '成功');
                this.$store.dispatch('UpdateCache', true);
                this.modifyDispose.dialogFormVisible = false;
            }).catch(Error => {
                this.loading = false;
            })
        }
    }
};
</script>
<style lang="scss" scoped>
section,
footer {
  text-align: center;
}
.title {
  text-align: left;
  color: #999;
}
.mg-left {
  margin-left: 20px;
}
.mr {
  margin-bottom: 30px;
}
section {
  padding-bottom: 50px;
  el-button {
    margin-right: 20px;
  }
}
.dialogTable {
  text-align: center;
  display: inline-block;
  //   margin: 30px auto;
  th,
  td {
    padding: 0 20px;
    text-align: center;
    border: solid 1px #ececec;
    height: 40px;
  }
  .cl-right {
    border-right: solid 1px transparent;
  }
  tr td:nth-of-type(1) {
    width: 120px;
  }
  tr td:nth-of-type(2) {
    text-align: left;
    width: 80%;
  }
  //   tr td:nth-of-type(3) {
  //     width: 100px;
  //   }
  //   tr td:nth-of-type(4) {
  //     width: 210px;
  //   }
}
.cl-mony {
  color: #ff6600;
}
.title {
  position: relative;
  margin-bottom: 30px;
  font-size: 14px;
  padding-left: 20px;
  &::after {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 4px;
    height: 14px;
    background: #ff5e2c;
  }
}
</style>
